<template>
    <view class="schedule-page">
        <!-- 标题 + 筛选按钮 -->
        <view class="header">
            <text class="title">排班记录</text>
            <button class="filter-btn" @click="toggleDrawer">筛选</button>
        </view>

        <!-- 抽屉遮罩（点击关闭） -->
        <view class="custom-drawer-mask" v-if="drawerVisible" @click="toggleDrawer"></view>

        <!-- 抽屉内容（右侧滑出） -->
        <view class="custom-drawer" :style="drawerStyle" v-if="drawerVisible">
            <!-- 筛选条件：时间范围 -->
            <view class="filter-section">
                <text class="section-title">时间范围</text>
                <view class="date-range">
                    <button class="date-btn"
                        :style="{ backgroundColor: timeRange === 'week' ? 'red' : '#f5f5f5', color: timeRange === 'week' ? 'white' : 'black' }"
                        @click="() => setTimeRange('week')">近1周</button>
                    <button class="date-btn"
                        :style="{ backgroundColor: timeRange === 'month' ? 'red' : '#f5f5f5', color: timeRange === 'month' ? 'white' : 'black' }"
                        @click="() => setTimeRange('month')">近1月</button>
                    <button class="date-btn"
                        :style="{ backgroundColor: timeRange === 'threeMonth' ? 'red' : '#f5f5f5', color: timeRange === 'threeMonth' ? 'white' : 'black' }"
                        @click="() => setTimeRange('threeMonth')">近3月</button>
                    <view class="custom-date" v-if="timeRange === 'custom'">
                        <text>自定义日期：</text>
                        <input type="date" v-model="customStart" />
                        <text class="divider">-</text>
                        <input type="date" v-model="customEnd" />
                    </view>
                </view>
            </view>

            <!-- 筛选条件：其他扩展（可自行添加） -->
            <view class="filter-section">
                <text class="section-title">其他筛选</text>
                <text class="tips">可扩展“金额范围”“状态筛选”等逻辑</text>
            </view>

            <!-- 底部按钮：重置 + 确认 -->
            <view class="btn-group">
                <button class="reset-btn" @click="resetFilter">重置</button>
                <button class="confirm-btn" @click="confirmFilter">确认</button>
            </view>
        </view>

        <!-- 排班列表（模拟数据，可替换真实请求） -->
        <view class="schedule-list">
            <view class="schedule-item" v-for="(item, index) in scheduleList" :key="index">
                <view class="item-top">
                    <text class="item-title">{{ item.title }}</text>
                    <text class="status" :style="{ color: getStatusColor(item.status) }">
                        {{ item.status }}
                    </text>
                </view>
                <view class="item-middle">
                    <text>开始：{{ formatTime(item.start) }}</text>
                    <text>结束：{{ formatTime(item.end) }}</text>
                </view>
                <view class="item-bottom">
                    <text>技术人员：{{ item.technician.username }}</text>
                    <text>创建人：{{ item.createdBy }}</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
// 引入请求方法（和之前的 getSchedules 逻辑一致）
import { getSchedules } from './schedule.js';

export default {
    data() {
        return {
            scheduleList: [], // 排班数据
            drawerVisible: false, // 抽屉显示状态
            drawerStyle: {}, // 控制动画的样式（ translateX ）

            // 筛选条件
            timeRange: 'threeMonth', // week/month/threeMonth/custom
            customStart: '',
            customEnd: '',

            // 模拟时间范围计算（可根据需求调整）
            timeMap: {
                week: () => {
                    const now = new Date();
                    const start = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000).toISOString();
                    const end = new Date().toISOString();
                    return { start, end };
                },
                month: () => {
                    const now = new Date();
                    const start = new Date(now.getFullYear(), now.getMonth() - 1, now.getDate()).toISOString();
                    const end = new Date().toISOString();
                    return { start, end };
                },
                threeMonth: () => {
                    const now = new Date();
                    const start = new Date(now.getFullYear(), now.getMonth() - 3, now.getDate()).toISOString();
                    const end = new Date().toISOString();
                    return { start, end };
                }
            }
        };
    },
    onLoad() {
        this.fetchScheduleData(); // 初始化加载数据
    },
    methods: {
        // 显示/隐藏抽屉（带动画）
        toggleDrawer() {
            this.drawerVisible = !this.drawerVisible;
            // 动画：滑入/滑出
            this.drawerStyle = {
                transform: `translateX(${this.drawerVisible ? '0' : '100%'})`,
                transition: 'all 0.3s ease'
            };
        },

        // 重置筛选条件
        resetFilter() {
            this.timeRange = 'threeMonth';
            this.customStart = '';
            this.customEnd = '';
        },

        // 确认筛选并请求数据
        async confirmFilter() {
            let start, end;

            // 根据 timeRange 计算时间
            if (this.timeRange !== 'custom') {
                const { start: s, end: e } = this.timeMap[this.timeRange]();
                start = s;
                end = e;
            } else {
                // 自定义时间校验
                if (!this.customStart || !this.customEnd) {
                    uni.showToast({ title: '请填写完整日期', icon: 'none' });
                    return;
                }
                start = new Date(this.customStart).toISOString();
                end = new Date(this.customEnd).toISOString();
            }

            // 调用请求方法
            try {
                const res = await getSchedules(start, end);
                if (res.success) {
                    this.scheduleList = res.data;
                } else {
                    uni.showToast({ title: res.message || '获取数据失败', icon: 'none' });
                }
            } catch (error) {
                uni.showToast({ title: error.message || '请求出错', icon: 'none' });
            }

            // 关闭抽屉
            this.toggleDrawer();
        },

        // 初始化加载数据（默认近3月）
        async fetchScheduleData() {
            const { start, end } = this.timeMap['threeMonth']();
            try {
                const res = await getSchedules(start, end);
                if (res.success) {
                    this.scheduleList = res.data;
                } else {
                    uni.showToast({ title: res.message || '初始化数据失败', icon: 'none' });
                }
            } catch (error) {
                uni.showToast({ title: error.message || '请求出错', icon: 'none' });
            }
        },

        // 时间格式化
        formatTime(time) {
            if (!time) return '';
            const date = new Date(time);
            return (
                date.getFullYear() + '-' +
                (date.getMonth() + 1).toString().padStart(2, '0') + '-' +
                date.getDate().toString().padStart(2, '0') + '' +
                date.getHours().toString().padStart(2, '0') + ':' +
                date.getMinutes().toString().padStart(2, '0')
            );
        },

        // 状态颜色映射
        getStatusColor(status) {
            switch (status) {
                case '交易成功': return 'green';
                case '交易失败': return 'red';
                default: return 'gray';
            }
        },

        // 设置时间范围（week/month/threeMonth）
        setTimeRange(type) {
            this.timeRange = type;
            // 重置自定义时间（切换类型时清空）
            if (type !== 'custom') {
                this.customStart = '';
                this.customEnd = '';
            }
        }
    }
};
</script>

<style scoped>
.schedule-page {
    padding: 16px;
    background-color: #f5f5f5;
}

/* 标题 + 按钮 */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.title {
    font-size: 20px;
    font-weight: bold;
}

.filter-btn {
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 6px 12px;
    border-radius: 4px;
}

/* 抽屉遮罩 */
.custom-drawer-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 998;
}

/* 抽屉内容（右侧滑出） */
.custom-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 70%;
    /* 可自定义宽度 */
    height: 100%;
    background-color: #fff;
    z-index: 999;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
    padding: 16px;
    box-sizing: border-box;
}

/* 筛选区域 */
.filter-section {
    margin-bottom: 24px;
}

.section-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 12px;
    display: block;
}

.date-range {
    display: flex;
    flex-wrap: wrap;
}

.date-btn {
    margin-right: 10px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 6px 12px;
}

.custom-date {
    margin-top: 8px;
}

.divider {
    margin: 0 8px;
}

/* 底部按钮 */
.btn-group {
    display: flex;
    justify-content: flex-end;
}

.reset-btn {
    background-color: #fff;
    border: 1px solid #ddd;
    margin-right: 10px;
    padding: 6px 12px;
    border-radius: 4px;
}

.confirm-btn {
    background-color: red;
    color: #fff;
    padding: 6px 12px;
    border-radius: 4px;
}

/* 排班列表 */
.schedule-list {
    background-color: #fff;
    border-radius: 8px;
    padding: 12px;
}

.schedule-item {
    padding: 12px;
    border-bottom: 1px solid #eee;
}

.item-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.item-title {
    font-size: 16px;
    font-weight: bold;
}

.status {
    font-size: 14px;
}

.item-middle {
    margin-bottom: 8px;
    color: #666;
}

.item-bottom {
    color: #999;
    font-size: 14px;
}
</style>